<!DOCTYPE html>
<html lang="en" >
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="author" content="VarKai" />
	
	
	
	<title>ChallengeARTX1 ｜ 芭菲猫的博客</title>
	
    
    
    <meta name="description" content="MDN练习随机生成笑话机以下是实现 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&amp;#34;utf-8&amp;#34;&amp;gt; &amp;lt;meta http-equiv=&amp;#34;X-UA-Compatible&amp;#34; content=&amp;#34;IE=edge,chrome=1&amp;#34;&amp;gt; &amp;lt;meta name=&amp;#34;viewport&amp;#34; content=&amp;#34;width=device-width&amp;#34;&amp;gt; &amp;lt;title&amp;gt;笑话机&amp;lt;/title&amp;gt; &amp;lt;script src=&amp;#34;main.js&amp;#34; defer&amp;gt;&amp;lt;/script&amp;gt; &amp;lt;link href=&amp;#34;style.css&amp;#34; rel=&amp;#34;stylesheet&amp;#34;&amp;gt; &amp;lt;/head&amp;gt; &amp;lt;body&amp;gt; &amp;lt;div&amp;gt; &amp;lt;label for=&amp;#34;customname&amp;#34;&amp;gt;输入自" />
    

    
    
    <meta name="keywords" content="Hugo, theme, zozo" />
    

	
    
    <link rel="shortcut icon" href="https://bafeimao.github.io/images/favicon.ico" />

    <link rel="stylesheet" type="text/css" media="screen" href="https://bafeimao.github.io/css/normalize.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/animate.css@4.1.0/animate.min.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://bafeimao.github.io/css/zozo.css" />
	<link rel="stylesheet" type="text/css" media="screen" href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" />
    <link rel="stylesheet" type="text/css" media="screen" href="https://bafeimao.github.io/css/highlight.css" />

    
    
</head>

<body>
    <div class="main animate__animated animate__fadeInDown">
        <div class="nav_container animated fadeInDown">
    <div class="site_nav" id="site_nav">
        <ul>
            
            <li>
                <a href="/">Home</a>
            </li>
            
            <li>
                <a href="/posts/">Archive</a>
            </li>
            
            <li>
                <a href="/tags/">Tags</a>
            </li>
            
            <li>
                <a href="/about/">About</a>
            </li>
            
        </ul>
    </div>
    <div class="menu_icon">
        <a id="menu_icon"><i class="ri-menu-line"></i></a>
    </div>
</div>
        <div class="header animated fadeInDown">
    <div class="site_title_container">
        <div class="site_title">
            <h1>
                <a href="https://bafeimao.github.io/">
                    <span>芭菲猫的博客</span>
                </a>
            </h1>
        </div>
        <div class="description">
            <p class="sub_title">芭菲猫</p>
            <div class="my_socials">
                
                
                <a href="https://github.com/bafeimao" title="github" target="_blank"><i class="ri-github-fill"></i></a>
                
                
                
                <a href="https://twitter.com/bafeimao0709" title="twitter" target="_blank"><i class="ri-twitter-fill"></i></a>
                
                
                <a href="https://bafeimao.github.io/index.xml" type="application/rss+xml" title="rss" target="_blank"><i
                        class="ri-rss-fill"></i></a>
            </div>
        </div>
    </div>
</div>
        <div class="content">
            <div class="post_page">
                <div class="post animate__animated animate__fadeInDown">
                    <div class="post_title post_detail_title">
                        <h2><a href='/posts/challengeartx1/'>ChallengeARTX1</a></h2>
                        <span class="date">2021.05.22</span>
                    </div>
                    <div class="post_content markdown"><h2 id="mdn练习随机生成笑话机以下是实现">MDN练习随机生成笑话机以下是实现</h2>
<div class="highlight"><pre class="chroma"><code class="language-html" data-lang="html"><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&#34;utf-8&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&#34;X-UA-Compatible&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;IE=edge,chrome=1&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;viewport&#34;</span> <span class="na">content</span><span class="o">=</span><span class="s">&#34;width=device-width&#34;</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>笑话机<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&#34;main.js&#34;</span> <span class="na">defer</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&#34;style.css&#34;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&#34;stylesheet&#34;</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

<span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;customname&#34;</span><span class="p">&gt;</span>输入自定义名字：<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;customname&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;text&#34;</span> <span class="na">placeholder</span><span class="o">=</span><span class="s">&#34;李雷&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;metric&#34;</span><span class="p">&gt;</span>公制<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;metric&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;radio&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;measure&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;metric&#34;</span> <span class="na">checked</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">&#34;american&#34;</span><span class="p">&gt;</span>美制<span class="p">&lt;/</span><span class="nt">label</span><span class="p">&gt;&lt;</span><span class="nt">input</span> <span class="na">id</span><span class="o">=</span><span class="s">&#34;american&#34;</span> <span class="na">type</span><span class="o">=</span><span class="s">&#34;radio&#34;</span> <span class="na">name</span><span class="o">=</span><span class="s">&#34;measure&#34;</span> <span class="na">value</span><span class="o">=</span><span class="s">&#34;american&#34;</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">div</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">button</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;randomize&#34;</span><span class="p">&gt;</span>生成随机笑话<span class="p">&lt;/</span><span class="nt">button</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>
    <span class="c">&lt;!-- 鸣谢：Willy Aguirre 提供的测试代码 --&gt;</span>
    <span class="p">&lt;</span><span class="nt">p</span> <span class="na">class</span><span class="o">=</span><span class="s">&#34;story&#34;</span><span class="p">&gt;&lt;/</span><span class="nt">p</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</code></pre></div><div class="highlight"><pre class="chroma"><code class="language-javascript" data-lang="javascript"><span class="kr">const</span> <span class="nx">customName</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;customname&#39;</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">randomize</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;.randomize&#39;</span><span class="p">);</span>
<span class="kr">const</span> <span class="nx">story</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">querySelector</span><span class="p">(</span><span class="s1">&#39;.story&#39;</span><span class="p">);</span>



<span class="kd">function</span> <span class="nx">randomValueFromArray</span><span class="p">(</span><span class="nx">array</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">return</span> <span class="nx">array</span><span class="p">[</span><span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="nx">array</span><span class="p">.</span><span class="nx">length</span><span class="p">)];</span>
<span class="p">}</span>

<span class="kd">let</span> <span class="nx">storyText</span> <span class="o">=</span> <span class="s1">&#39;今天气温 35 摄氏度，:insertx:出门散步。当走到:inserty:门前时，突然就:insertz:。人们都惊呆了，李雷全程目睹但并没有慌，因为:insertx:是一个 140 公斤的胖子，天气又辣么热。&#39;</span><span class="p">;</span>
<span class="kd">let</span> <span class="nx">insertX</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;怪兽威利&#39;</span><span class="p">,</span> <span class="s1">&#39;大老爹&#39;</span><span class="p">,</span> <span class="s1">&#39;圣诞老人&#39;</span><span class="p">];</span>
<span class="kd">let</span> <span class="nx">insertY</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;肯德基&#39;</span><span class="p">,</span> <span class="s1">&#39;迪士尼乐园&#39;</span><span class="p">,</span> <span class="s1">&#39;白宫&#39;</span><span class="p">];</span>
<span class="kd">let</span> <span class="nx">insertZ</span> <span class="o">=</span> <span class="p">[</span><span class="s1">&#39;自燃了&#39;</span><span class="p">,</span> <span class="s1">&#39;在人行道化成了一坨泥&#39;</span><span class="p">,</span> <span class="s1">&#39;变成一只鼻涕虫爬走了&#39;</span><span class="p">];</span>

<span class="nx">randomize</span><span class="p">.</span><span class="nx">addEventListener</span><span class="p">(</span><span class="s1">&#39;click&#39;</span><span class="p">,</span> <span class="nx">result</span><span class="p">);</span>



<span class="kd">function</span> <span class="nx">result</span><span class="p">()</span> <span class="p">{</span>
    <span class="kd">let</span> <span class="nx">newStory</span> <span class="o">=</span> <span class="nx">storyText</span><span class="p">;</span>
    <span class="kd">let</span> <span class="nx">xItem</span> <span class="o">=</span> <span class="nx">randomValueFromArray</span><span class="p">(</span><span class="nx">insertX</span><span class="p">);</span>
    <span class="kd">let</span> <span class="nx">yItem</span> <span class="o">=</span> <span class="nx">randomValueFromArray</span><span class="p">(</span><span class="nx">insertY</span><span class="p">);</span>
    <span class="kd">let</span> <span class="nx">zItem</span> <span class="o">=</span> <span class="nx">randomValueFromArray</span><span class="p">(</span><span class="nx">insertZ</span><span class="p">);</span>

    <span class="nx">newStory</span> <span class="o">=</span> <span class="nx">newStory</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s2">&#34;:insertx:&#34;</span><span class="p">,</span> <span class="nx">xItem</span><span class="p">);</span>
    <span class="nx">newStory</span> <span class="o">=</span> <span class="nx">newStory</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s2">&#34;:insertx:&#34;</span><span class="p">,</span> <span class="nx">xItem</span><span class="p">);</span>
    <span class="nx">newStory</span> <span class="o">=</span> <span class="nx">newStory</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s2">&#34;:inserty:&#34;</span><span class="p">,</span> <span class="nx">yItem</span><span class="p">);</span>
    <span class="nx">newStory</span> <span class="o">=</span> <span class="nx">newStory</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s2">&#34;:insertz:&#34;</span><span class="p">,</span> <span class="nx">zItem</span><span class="p">);</span>


    <span class="k">if</span> <span class="p">(</span><span class="nx">customName</span><span class="p">.</span><span class="nx">value</span> <span class="o">!==</span> <span class="s1">&#39;&#39;</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">customName</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
        <span class="nx">newStory</span> <span class="o">=</span> <span class="nx">newStory</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;李雷&#39;</span><span class="p">,</span> <span class="nx">name</span><span class="p">);</span>

    <span class="p">}</span>

    <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&#34;american&#34;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">let</span> <span class="nx">weight</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="mi">300</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&#34;华氏度&#34;</span><span class="p">;</span>
        <span class="kd">let</span> <span class="nx">temperature</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="mi">94</span><span class="p">)</span> <span class="o">+</span> <span class="s2">&#34;磅&#34;</span><span class="p">;</span>
        <span class="nx">newStory</span> <span class="o">=</span> <span class="nx">newStory</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s2">&#34;34摄氏度&#34;</span><span class="p">,</span> <span class="nx">temperature</span><span class="p">);</span>
        <span class="nx">newStory</span> <span class="o">=</span> <span class="nx">newStory</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s2">&#34;130公斤&#34;</span><span class="p">,</span> <span class="nx">weight</span><span class="p">);</span>

    <span class="p">}</span>

    <span class="nx">story</span><span class="p">.</span><span class="nx">textContent</span> <span class="o">=</span> <span class="nx">newStory</span><span class="p">;</span>
    <span class="nx">story</span><span class="p">.</span><span class="nx">style</span><span class="p">.</span><span class="nx">visibility</span> <span class="o">=</span> <span class="s1">&#39;visible&#39;</span><span class="p">;</span>
<span class="p">}</span>
</code></pre></div><div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="nt">body</span> <span class="p">{</span>
  <span class="k">font-family</span><span class="p">:</span> <span class="kc">sans-serif</span><span class="p">;</span>
  <span class="k">width</span><span class="p">:</span> <span class="mi">350</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">label</span> <span class="p">{</span>
  <span class="k">font-weight</span><span class="p">:</span> <span class="kc">bold</span><span class="p">;</span>  
<span class="p">}</span>

<span class="nt">div</span> <span class="p">{</span>
  <span class="k">padding-bottom</span><span class="p">:</span> <span class="mi">20</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">input</span><span class="o">[</span><span class="nt">type</span><span class="o">=</span><span class="s2">&#34;text&#34;</span><span class="o">]</span> <span class="p">{</span>
  <span class="k">padding</span><span class="p">:</span> <span class="mi">5</span><span class="kt">px</span><span class="p">;</span>
  <span class="k">width</span><span class="p">:</span> <span class="mi">150</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">p</span> <span class="p">{</span>
  <span class="k">background</span><span class="p">:</span> <span class="mh">#FFC125</span><span class="p">;</span>
  <span class="k">color</span><span class="p">:</span> <span class="mh">#5E2612</span><span class="p">;</span>
  <span class="k">padding</span><span class="p">:</span> <span class="mi">10</span><span class="kt">px</span><span class="p">;</span>
  <span class="k">visibility</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span>
<span class="p">}</span>

</code></pre></div><p>自己尝试做时没有想到用replace这么便利的方法，想尝试用字符串切分但非常复杂且不易理解和维护，非常蠢笨，写完逻辑后发现怎么都跑不动才发现script引入标签时要加defer属性让js在html运行后再加载。</p>
</div>
                    <div class="post_footer">
                        
                        <div class="meta">
                            <div class="info">
                                <span class="field tags">
                                    <i class="ri-stack-line"></i>
                                    
                                    <a href="https://bafeimao.github.io/tags/html/">HTML</a>
                                    
                                    <a href="https://bafeimao.github.io/tags/js/">JS</a>
                                    
                                    <a href="https://bafeimao.github.io/tags/artx/">ARTX</a>
                                    
                                </span>
                            </div>
                        </div>
                        
                    </div>
                </div>
                
                
                
<div class="doc_comments">
    <div class="comments_block_title">发表评论</div>
    <div id="vcomments"></div>
</div>

<link rel="stylesheet" href="https://bafeimao.github.io/css/comments.css" />
<script src="//cdn1.lncld.net/static/js/3.0.4/av-min.js"></script>
<script src='//unpkg.com/valine/dist/Valine.min.js'></script>

<script type="text/javascript">
    new Valine({
        el: '#vcomments',
        appId: 'UcKVMLv5ooasANE9mh8XerYE-gzGzoHsz',
        appKey: 'reu9T0CJMFl0bQ5SIqvP3wNl',
        placeholder: '开始你的第一个评论吧 ',
        visitor: 'true',
    })
</script>
                
            </div>
        </div>
    </div>
    <a id="back_to_top" href="#" class="back_to_top"><i class="ri-arrow-up-s-line"></i></a>
    <footer class="footer">
    <div class="powered_by">
        <a href="https://varkai.com">Designed by VarKai,</a>
        <a href="http://www.gohugo.io/">Proudly published with Hugo</a>
    </div>

    <div class="footer_slogan">
        <span>主页！主页！</span>
    </div>
</footer>
    <script src="https://bafeimao.github.io/js/jquery-3.5.1.min.js"></script>
<link href="https://bafeimao.github.io/css/fancybox.min.css" rel="stylesheet">
<script src="https://bafeimao.github.io/js/fancybox.min.js"></script>
<script src="https://bafeimao.github.io/js/zozo.js"></script>


<script type="text/javascript" async
    src="https://cdn.bootcss.com/mathjax/2.7.5/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
        MathJax.Hub.Config({
            tex2jax: {
                inlineMath: [['$', '$'], ['\\(', '\\)']],
                displayMath: [['$$', '$$'], ['\[\[', '\]\]']],
                processEscapes: true,
                processEnvironments: true,
                skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
                TeX: {
                    equationNumbers: { autoNumber: "AMS" },
                    extensions: ["AMSmath.js", "AMSsymbols.js"]
                }
            }
        });

        MathJax.Hub.Queue(function () {
            
            
            
            var all = MathJax.Hub.getAllJax(), i;
            for (i = 0; i < all.length; i += 1) {
                all[i].SourceElement().parentNode.className += ' has-jax';
            }
        });
    </script>

<style>
    code.has-jax {
        font: inherit;
        font-size: 100%;
        background: inherit;
        border: inherit;
        color: #515151;
    }
</style>



</body>

</html>